<template>
  <div class="container">
    <div class="admin-container">
      <div class="flexWithJusBetween mg-B20">
        <div class="title">项目活动列表</div>
      </div>
      <div v-show="queryType == false">
        <el-form ref="warehouseForm" label-width="80px" :inline="true">
          <el-form-item label="关键词">
            <el-input
              prefix-icon="el-icon-search"
              v-model="query.keyword"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="公司名称">
          <el-select v-model="query.companyId" placeholder="请选择公司" @change="companyChange" clearable>
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="item in companyList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称">
        <el-select v-model="query.projectId" placeholder="请选择项目" filterable clearable>
            <el-option
              :label="item.projectName"
              :value="item.id"
              v-for="item in projectList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item> 
          <el-form-item label="填报时间">
            <el-date-picker
              v-model="query.date"
              value-format="yyyy-MM-dd"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-button
            style="margin-left: 10px"
            icon="el-icon-search"
            type="primary"
            @click="submitQuery"
            >查询
          </el-button>
          <el-button
            style="margin-left: 10px"
            icon="el-icon-refresh-right"
            type="info"
            @click="resetQuery"
            >重置
          </el-button>
        </el-form>
      </div>
      <el-table border :data="tableData" style="width: 100%" align="center">
        <el-table-column prop="activityName" label="活动名称" align="center"> </el-table-column>
        <el-table-column prop="activityTitle" label="活动主题" align="center"> </el-table-column>
        <el-table-column prop="jb" label="级别(国际/国/省/市)" align="center"> </el-table-column>
        <el-table-column prop="activityDate" label="活动时间" align="center"> </el-table-column>
        <el-table-column prop="address" label="活动地点" align="center"> </el-table-column>
        <el-table-column prop="projectName" label="项目名称" align="center"> </el-table-column>
        <el-table-column prop="company" label="举办单位" align="center"> </el-table-column>
        <el-table-column label="活动状态" align="center" > 
          <template slot-scope="scope">
            <div>{{projectActivityStatusFormate("projectActivity_status-"+scope.row.status)}}</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="viewProjectActivity(scope.row)"
              >查询</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-footer class="el-footerBox">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page.sync="pageNum"
          @current-change="getprojectActivityList"
        >
        </el-pagination>
      </el-footer>
    </div>
  </div>
</template>

<script>
import utils from "@/utils/utils.js";
import { find as companyFind, list as companyList } from "@/api/adminCompany";
import { find as projectFind, list as projectList } from "@/api/adminProject";
import { list as projectActivityList } from "@/api/adminProjectActivity";

export default {
  components: {},
  name: "project",
  data() {
    return {
      queryType: false,
      query: {
        keyword: "",
        date:"",
        startDate:"",
        endDate:"",
        companyId: "",
      projectId:"",
      },

      companyId: "",
      projectId:"",
      total:0,
      pageNum:1,
      pageSize:20,
      tableData: [],
      companyInfo: {},
      projectInfo: {},
      companyList: [],
      projectList: [],

      jbDict:[],
      jbDictPromise:"",
      projectActivityStatusDict:[],
      projectActivityStatusPromise:"",
    };
  },
  watch: {
    $route: {
      handler: function (route) {},
      immediate: true,
    },
  },

  created() {
    this.jbDictPromise = utils.getDictList("jb", (res) => {
      this.jbDict = res.data;
    });
    this.projectActivityStatusPromise = utils.getDictList("projectActivity_status", (res) => {
      this.projectActivityStatusDict = res.data;
    });
  },

  mounted() {
    let _this = this
      _this.companyId = _this.$route.query.companyId;
      _this.projectId = _this.$route.query.projectId;
      _this.getProjectList("")
      _this.getCmpanyList();
      Promise.all([_this.jbDictPromise, _this.projectActivityStatusPromise]).then(res => {
      _this.getprojectActivityList();
    })
    
    
  },

  destroyed() {},

  methods: {

    //获取项目列表
    getprojectActivityList() {
      let _this = this
      let params = new URLSearchParams();
      params.append('status', 2);
      params.append('projectId', _this.query.projectId);
       params.append("companyId", _this.query.companyId);
      params.append("startDate", _this.query.startDate);
      params.append("endDate", _this.query.endDate);
      params.append("keyword", _this.query.keyword);
      params.append('pageNum', _this.pageNum);
      params.append('pageSize', _this.pageSize);
      projectActivityList(params)
      // projectActivityList()
        .then((res) => {
          console.log("projectActivityList成功获取数据--", res);
          if (res.type == "success") {
            this.tableData = res.data.data;
            this.total = res.data.total
            if(this.tableData.length > 0){
              this.tableData.map(item => {
              item.activityDate = utils.dateFormatter(item.activityDate)
              item.jb = this.jbFormate(item.jb)
              if(!utils.isNull(item.meta)){
                item.meta = JSON.parse(item.meta)
              }
              })
              }
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },

    //条件查询
    submitQuery() {
      console.log('this.query.date--',this.query);
      if(!utils.isNull(this.query.date)){
        this.query.startDate = this.query.date[0]
        this.query.endDate = this.query.date[1]
      }
      this.getprojectActivityList();
    },

    //条件查询
    resetQuery() {
      this.query = {
        keyword: "",
        date:"",
        startDate:"",
        endDate:"",
        companyId: "",
      projectId:"",
      },
        this.getprojectActivityList();
    },

//查看项目活动
    viewProjectActivity(data) {
      console.log('data--',data);
      this.$router.push({
        path: "/projectActivity/queryView",
        query: { projectId: this.projectId,companyId: this.companyId, projectActivityId:data.id },
      });
    },

    //提交项目活动
    editProjectActivity(data) {
      console.log('data--',data);
      this.$router.push({
        path: "/projectActivity/edit",
        query: { projectId: this.projectId,companyId: this.companyId, projectActivityId:data.id },
      });
    },

    //添加项目活动
    addProjectActivity() {
      this.$router.push({
        path: "/projectActivity/add",
        query: { projectId: this.projectId,companyId: this.companyId },
      });
    },

    //获取项目信息
    projectFind(id){
      projectFind(id).then((res) => {
        console.log("获取项目信息--", res);
        if (res.type == "success") {
          this.projectInfo = res.data.project;
        }
      });
    },

    //获取公司信息
    companyFind(id) {
      companyFind(id).then((res) => {
        console.log("获取公司信息res--", res);
        if (res.type == "success") {
          this.companyInfo = res.data.company;
        }
      });
    },

    companyChange(data){
      console.log('data--',data);
      this.getProjectList(data)
    },

   //获取项目列表
    getProjectList(id){
      let params = new URLSearchParams();
      params.append('companyId', id);
      projectList(params).then((res) => {
        console.log("获取项目信息--", res);
        if (res.type == "success") {
          this.projectList = res.data.data;
        }
      });
    },

    //获取公司列表
    getCmpanyList() {
      companyList().then((res) => {
        console.log("获取公司信息res--", res);
        if (res.type == "success") {
          this.companyList = res.data.data;
        }
      });
    },

    //级别字典匹配
    jbFormate(data) {
      return utils.selectDictLabel(this.jbDict, data);
    },

    projectActivityStatusFormate(data) {
      return utils.selectDictLabel(this.projectActivityStatusDict, data);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-pagination {
  display:block;
}
</style>
